<template>
  <div class="table">
    <n-data-table
      :columns="columns"
      :data="data.tableData"
      :pagination="pagination"
      striped
      :row-props="rowProps"
    />
  </div>
  <n-drawer v-model:show="showOuter" :width="1000">
    <n-drawer-content :title=title>
        <div class="tableForDetail" v-if="showDetail">
    <n-data-table :columns="columnsForDetail" :data="dataForDetail.tableDate" size="large" :bordered="false"
      :pagination="pagination" striped />
  </div>
    </n-drawer-content>
  </n-drawer>

</template>

<script setup lang="ts">
import { BackURL } from "@/api";
import axios from "axios";
import type { DataTableColumns } from "naive-ui";
import { reactive, ref } from "vue";

type RowData = {
  key: number;
  word: string;
  detail: {
    whole_average: number;
    whole_count: number;
  };
};

// let tableData: RowData[] = []
let data = reactive({
  tableData: [{}],
});

const createData = () => {
  axios.get(BackURL + "/keywords").then((response) => {
    data.tableData = response.data.data;
    console.log(data);
  });
};

const createColumns = (): DataTableColumns<RowData> => {
  return [
    {
      title: "序号",
      key: "key",
      render: (_: any, index: number) => {
        return `${index + 1}`;
      },
    },
    {
      title: "关键词",
      key: "word",
    },
    {
      title: "用户感知水平",
      key: "detail.whole_average"
    },
    {
      title: "搜索次数",
      key: "detail.whole_count"
    }
  ];
};
createData();
console.log(data);

createData();

const columns = createColumns();

const pagination = { pageSize: 10 };


// 以下跟双击表格有关
let showDetail = ref(false)

const columnsForDetail = [
  {
    title: '序号',
    key: 'key'
  },
  {
    title: '关键词',
    key: 'word'
  },
  {
    title: '竞争度',
    key: 'detail.competitive'
  },
  {
    title: '用户感知平均值',
    key: 'detail.average'
  },
  {
    title: '综合权重',
    key: 'detail.result'
  },
  {
    title: '评价次数',
    key: 'detail.count'
  }
]

const dataForDetail = reactive({
  tableDate: [{}]
}
)

let title = ref('')
let showOuter = ref(false)

const rowProps = (row: RowData) => {
        return {
          ondblclick: () => {
            console.log('双击事件触发： '+row.word)
            title.value = row.word
            showOuter.value = true
            doubleClick(row.word)
          }
        }
      }

const doubleClick = (keyword: string) => {
  axios.post(BackURL + '/compkey', {
    keyword: keyword
  }).then(response => {
    dataForDetail.tableDate = response.data.data;
    showDetail.value = true
  })
}
</script>

<style scoped>
.table {
  position: fixed;
  top: 3%;
  left: 2%;
  right: 2%;
  width: 50%;
}

.tableForDetail{
  width: 100%;
  height: 100%;
}
</style>
